<template>
    <el-dialog title="均值" :visible.sync="isShow" width="74%" append-to-body :lock-scroll="true"
        :close-on-click-modal="false">
        <!-- 瀑布图 -->
        <div class="track" ref="meanValue">

        </div>
    </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
import { options } from './config.js'
export default {
    data() {
        return {
            isShow: false,
            tagsSelected: null,
            list: null,
        }
    },
    props: {

    },
    methods: {
        doOpen(tagsSelected, list) {
            function calculateHourlyAverage(arr) {
                const result = [];
                const hourMap = new Map();

                // 遍历数组，按小时进行分组并累加 value
                arr.forEach(item => {
                    const hour = item.time.substring(0, 13); // 取时间的年月日时部分，保留到小时
                    if (!hourMap.has(hour)) {
                        hourMap.set(hour, { count: 1, total: Number(item.value) });
                    } else {
                        const temp = hourMap.get(hour);
                        temp.count++;
                        temp.total += Number(item.value);
                        hourMap.set(hour, temp);
                    }
                });
                // 计算每个小时的平均 value，并存入结果数组中
                hourMap.forEach((value, key) => {
                    result.push({
                        time: key,
                        value: (value.total / value.count).toFixed(2) // 计算平均值，保留一位小数
                    });
                });
                return result;
            }
            this.isShow = true

            this.$nextTick(() => {
                let ref = this.$refs.meanValue
                var myChart = echarts.init(ref)
                let legendData = []
                let seriesData = []
                tagsSelected.forEach((e1) => {
                    var arr = []
                    legendData.push(e1.value + ' ' + e1.unit)
                    let Arr = calculateHourlyAverage(list[e1.nickname])
                    if (Arr)
                        Arr.forEach((e2) => {
                            arr.push([e2.time, e2.value])
                        })
                    let obj = {
                        name: e1.value + ' ' + e1.unit,
                        data: arr,
                        type: 'line',
                        symbol: 'circle',
                        smooth: false,
                        symbolSize: 2,
                        connectNulls: false,
                        hoverAnimation: false,
                    }
                    seriesData.push(obj)
                })
                this.options.legend.data = legendData
                this.options.series = seriesData
                this.options.xAxis.type = 'time'
                this.options.yAxis.name = '特征值'
                this.options.tooltip.formatter = (params) => {
                    this.wave_time = params[0].data[0]
                    var res = '时间：  ' + params[0].data[0] + '<br/>'
                    for (var i = 0; i < params.length; i++) {
                        res += params[i].seriesName + '     ' + params[i].data[1] + '<br/>'
                    }
                    return res
                }
                myChart.setOption(this.options)
                const chartObserver = new ResizeObserver(() => {
                    myChart.resize()
                })
                chartObserver.observe(ref)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            })
        }
    },
    created() {

        this.options = options
    }
}
</script>

<style lang="less">
.track {
    width: 100%;
    height: 60vh;
}
</style>
